import { httpPost } from "@utils/HttpUtil";
import { Button, Col, message, Row, Select, SelectProps, Tag } from "antd";
import { FC, useState } from "react";

type TagRender = SelectProps['tagRender'];
const knowledgeList = httpPost("/knowledge/getKnowledgeList", {}).data;
const tagList = knowledgeList.map((item:any)=>{
    return {
      value: item.title,
      label: item.title,
    };
})


const options: SelectProps["options"] = tagList;

const tagRender: TagRender = (props) => {
    const { label, closable, onClose } = props;
    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
      event.preventDefault();
      event.stopPropagation();
    };
    var filterList = knowledgeList.filter((item:any)=>item.title === label);
    var item = filterList[0];
    if(item !== undefined){
        return (
            <Tag
              color={item.color}
              onMouseDown={onPreventMouseDown}
              closable={closable}
              onClose={onClose}
              style={{ marginInlineEnd: 6 }}
            >
              {item.title}
            </Tag>
          );
    }else{
      return <></>;
    }
};



const ManageProblemSelect: FC<any> = ({ selectedKnowledge, problemId }) => {
    var defaultValue = selectedKnowledge.map((item:any)=>item.title);
    const [currentValue, setCurrentValue] = useState(defaultValue);

    const handleSelected = (value:any)=>{
      setCurrentValue(value);
    }

    const editProblemKnowledge = ()=>{
        var res = httpPost("/problemKnowledge/editProblemKnowledge", {
            problemId: problemId,
            knowledgeList: currentValue
        }).data;
        if(res){
            message.success("知识点配置修改成功");
        }else{
            message.error("知识点配置修改失败");
        }
    }

    return (
      <div>
        <Select
          mode="multiple"
          tagRender={tagRender}
          defaultValue={currentValue}
          style={{ width: "100%", marginTop: 20, marginBottom: 20 }}
          options={options}
          onChange={handleSelected}
        />
        <Row>
          <Col span={17}></Col>
          <Col span={4}>
            <Button type="primary" onClick={editProblemKnowledge}>保存知识点配置</Button>
          </Col>
        </Row>
      </div>
    );
};

export default ManageProblemSelect;